<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>打印配货单</title>
    <script src="/jquery-1.8.3.min.js"></script>
    <script src="/printThis.js"></script>
    <script src="/chineseMoney.js"></script>
    <link rel="stylesheet" href="/print.css"/>
</head>
<body>
<div id="receiptPrintArea0">
    <h3 style="text-align: center">配货单-<span class="router"></span></h3>
    <br/>
    <table width="100%">
        <tr>
            <td width="25%">配货日期范围：</td><td width="75%"><span class="distributionDate"></span></td>
        </tr>
        <tr>
            <td width="25%">餐别：</td><td width="75%"><span class="mealsType"></span></td>
        </tr>
        <tr>
            <td width="25%">食材类型：</td><td width="75%"><span class="foodType"></span></td>
        </tr>
    </table>
    <br/>
    <table style="width: 100%;" class="printTable">
        <thead style="border: 1px solid" class="customers">
        </thead>
        <tbody class="content">
        </tbody>
    </table>
</div>
<script th:inline="javascript">
    var params = [[${params}]];
    var router = params.router;
    var routerName = params.routerName;
    var beginDistributionDate = params.beginDistributionDate;
    var endDistributionDate = params.endDistributionDate;
    var mealsTypeId = params.mealsTypeId;
    var mealsTypeName = params.mealsTypeName;
    var foodMaterialTypeId = params.foodMaterialTypeId;
    var foodMaterialTypeName = params.foodMaterialTypeName;
    var colChoice = params.colChoice;
    var backAddress = params.backAddress;
    function print() {
        $("#receiptPrintArea0").printThis({
            debug: false,
            importCSS: true,
            importStyle: true,
            printContainer: true,
            pageTitle: "",
            removeInline: false,
            printDelay: 333,
            header: null,
            formValues: true
        });
    }
    $.ajax({
            url: backAddress + "/api/order/querySupplySummaryByRouter",
            data : JSON.stringify({
                "beginDistributionDate" : beginDistributionDate,
                "endDistributionDate" : endDistributionDate,
                "router" : router,
                "mealsTypeId" : mealsTypeId,
                "foodMaterialTypeId" : foodMaterialTypeId
            }),
            type: "post",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            //traditional : true,
            success: function (data) {
                //console.log(data)
                $(".distributionDate")[0].innerText = beginDistributionDate + '至' + endDistributionDate;
                $(".mealsType")[0].innerText = mealsTypeName;
                $(".foodType")[0].innerText = foodMaterialTypeName;
                $(".router")[0].innerText = routerName;
                var str = '' ;
                var rowGroup = Math.floor(data.data.header.length / colChoice);
                if (data.data.header.length % colChoice > 0) rowGroup++;
                if (rowGroup == 1) {
                    str = '<td width="15%">食材</td>';
                    for (var i = 0; i < data.data.header.length; i++) {
                        str += "<td width=\"5%\">" + data.data.header[i] + "</td>";
                    }
                    str += '<td width="5%">汇总</td>';
                } else {
                    str = '<tr><td width="15%" rowspan="' + rowGroup + '">食材</td>';
                    for (var i = 0; i < colChoice; i++) {
                        str += "<td width=\"8%\">" + data.data.header[i] + "</td>";
                    }
                    str += '<td width="5%" rowspan="' + rowGroup + '">汇总</td></tr>';
                    for (var i = 1; i < rowGroup; i++) {
                        str += '<tr>';
                        for (var j = 0 ; j < colChoice ; j++) {
                            if (i * colChoice + j < data.data.header.length)
                                str += "<td width=\"8%\">" + data.data.header[i * colChoice + j] + "</td>";
                            else
                                str += "<td width=\"8%\"></td>";
                        }
                        str += '</tr>';
                    }
                }
                $(".customers")[0].innerHTML = str;
                str = '' ;
                for (var i = 0 ; i < data.data.data.length ; i++) {
                    if (rowGroup == 1) {
                        str += "<tr><td width=\"15%\">" + data.data.data[i].name + "</td>";
                        for (var j = 0; j < data.data.header.length; j++) {
                            str += "<td width=\"8%\">" + (data.data.data[i][data.data.header[j]] === null ? '' : data.data.data[i][data.data.header[j]]) + "</td>";
                        }
                        str += "<td width=\"5%\">" + data.data.data[i].total + "</td></tr>";
                    } else {
                        str += '<tr><td width="15%" rowspan="' + rowGroup + '">' + data.data.data[i].name + '</td>';
                        for (var j = 0; j < colChoice; j++) {
                            str += "<td width=\"8%\">" + (data.data.data[i][data.data.header[j]] === null ? '&nbsp;' : data.data.data[i][data.data.header[j]]) + "</td>";
                        }
                        str += '<td width="5%" rowspan="' + rowGroup + '">' + data.data.data[i].total + '</td></tr>';
                        for (var k = 1; k < rowGroup; k++) {
                            str += '<tr>';
                            for (var j = 0 ; j < colChoice ; j++) {
                                if (k * colChoice + j < data.data.header.length)
                                    str += "<td width=\"8%\">" + (data.data.data[i][data.data.header[k * colChoice + j]] === null ? '&nbsp;' : data.data.data[i][data.data.header[k * colChoice + j]]) + "</td>";
                                else
                                    str += "<td width=\"8%\"></td>";
                            }
                            str += '</tr>';
                        }
                    }
                }
                $(".content")[0].innerHTML = str;
                print()
            },
            error: function (status) {
                alert(status)
            }
        }
    )
</script>

</body>
</html>